<template>
  <div class="center-container" v-if="question">

    <el-card class="center-content" style="width: 900px;height: 400px">

      <h3 style="font-size: large;font-weight: bolder">单选题</h3>
      <el-switch
          v-model="isNextAuto"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #111111;margin-right: 20px"
          active-text="开启刷题模式"
          inactive-text="关闭刷题模式"
          v-on=""
      />
      <el-switch
          v-model="isRandom"
          style="--el-switch-on-color: #01ce66; --el-switch-off-color: #111111;"
          active-text="开启随机题序"
          inactive-text="关闭随机题序"
          v-on=""
      />

      <h4 >{{question.text}}</h4>
      <el-radio-group v-model="selectedOption" class="radio-group">
        <el-radio label="A">A:{{ question.optionA }}</el-radio>
        <el-radio label="B">B:{{ question.optionB }}</el-radio>
        <el-radio label="C">C:{{ question.optionC }}</el-radio>
        <el-radio label="D">D:{{ question.optionD }}</el-radio>
      </el-radio-group>
      <div class="button-container">
        <div class="last-container">
          <el-button @click="fetchLastQuestion" type="info">上一题</el-button>
        </div>
        <div class="submit-container">
          <el-button @click="submitAnswer" type="success">提交答案</el-button>
        </div>
        <div class="next-container">
          <el-button @click="fetchNextQuestion" type="primary">下一题</el-button>
        </div>
      </div>
    </el-card>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "SS-Marx",
  data(){
    return {
      counts:'',
      question: '',
      number: 1,
      selectedOption: '',
      isNextAuto:false,
      isRandom:false,
      lastQuestionId:1,
    }
  },
  mounted() {
    this.fetchCountsAndQuestion();
  },
  methods: {
    submitAnswer(){
      const rightAns=this.question.correctOption
      // console.log(this.selectedOption)
      if(this.selectedOption.length===0){
        this.$message({
          type: "error",
          message: "请先选择"
        })
        return
      }
      if(rightAns===this.selectedOption){
        this.$message({
          type: "success",
          message: `回答正确！`
        })
      }else{
        this.$message({
          type: "error",
          message: `回答错误！正确答案是${rightAns}`
        })
        axios.get(`/api/user/getWrongCount/ss/${this.number}`).catch(error=>{
          console.error("fail to countWrongQuestion",error);
        })
        return;
      }
      if(this.isNextAuto){
        this.fetchNextQuestion()
      }
    },
    fetchCountsAndQuestion() {
      axios.get("/api/ss/getCount").then(res=>{
        this.counts=res.data.data
      });
      this.number=1
      axios.get(`/api/ss/getQuestionById/${this.number}`).then(res=>{
        this.question=res.data.data;
        this.question.text=res.data.data.questionText
        this.question.optionA=res.data.data.optionA
        this.question.optionB=res.data.data.optionB
        this.question.optionC=res.data.data.optionC
        this.question.optionD=res.data.data.optionD

        // console.log(this.question)
      }).catch(error=>{
        console.error("fail to fetch question",error);
      })
    },
    fetchLastQuestion(){
      this.selectedOption=""
      if(this.isRandom){
        axios.get(`/api/ss/getQuestionById/${this.lastQuestionId}`).then(res=>{
          this.question=res.data.data;
          this.question.text=res.data.data.questionText
          // console.log(this.question)
          // this.lastQuestionId=this.randomNum
        }).catch(error=>{
          console.error("fail to fetch question",error);
        })
        return;
      }
      if(this.number===1){
        this.$message({
          type: "error",
          message: "已经是第一题了"
        })
        return
      }
      this.number-=1
      axios.get(`/api/ss/getQuestionById/${this.number}`).then(res=>{
        this.question=res.data.data;
        this.question.text=res.data.data.questionText
        this.question.optionA=res.data.data.optionA
        this.question.optionB=res.data.data.optionB
        this.question.optionC=res.data.data.optionC
        this.question.optionD=res.data.data.optionD
        // console.log(this.question)
      }).catch(error=>{
        console.error("fail to fetch question",error);
      })
    },
    fetchNextQuestion() {
      this.selectedOption=""
      if(this.isRandom){
        this.lastQuestionId=this.number
        this.number=Math.floor(Math.random() * this.counts) + 1;
        axios.get(`/api/ss/getQuestionById/${this.number}`).then(res=>{
          this.question=res.data.data;
          this.question.text=res.data.data.questionText
          // console.log(this.question)
        }).catch(error=>{
          console.error("fail to fetch question",error);
        })
        return;
      }
      this.number+=1
      // console.log()
      if(this.number===this.counts+1) {
        // console.log(1)
        this.number = 1
      }
      axios.get(`/api/ss/getQuestionById/${this.number}`).then(res=>{
        this.question=res.data.data;
        this.question.text=res.data.data.questionText
        this.question.optionA=res.data.data.optionA
        this.question.optionB=res.data.data.optionB
        this.question.optionC=res.data.data.optionC
        this.question.optionD=res.data.data.optionD
        // console.log(this.question)
      }).catch(error=>{
        console.error("fail to fetch question",error);
      })
    }
  }
}
</script>

<style scoped>
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  margin-left: 100px;
  margin-top: 100px;
}

.card-container {
  border: 1px solid #ccc;
  padding: 20px;
  background-color: #f5f5f5;
}

.question-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.option {
  margin-bottom: 10px;
}

.button-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.submit-container {
  text-align: center;
  margin-top: 20px;
}
.next-container{
  text-align: center;
  margin-top: 20px;
  margin-right: 200px;
}
.last-container{
  text-align: center;
  margin-top: 20px;
  margin-left: 200px;
}
.radio-group{
  margin-left: 100px;
  display: flex;
  flex-direction: row;
}



</style>